<script setup>
import {ref, defineProps, onMounted, onUnmounted} from "vue";
import {queryVision, deleteVision} from "@/api/eyeCare.js";
import {useRouter} from "vue-router";
import {showConfirmDialog, showNotify} from "vant";
import chartGroup from "./chartGroup.vue"
import {eventBus} from "@/utils/eventBus.js";

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const active = ref(0);
const router = useRouter()
const props = defineProps({
  patientId: String,
})

let page = 1
let pageSize = 10
let total = 0

const onLoad = () => {
  loading.value = true;
  queryVision({page, pageSize, patientId: props.patientId})
      .then(res => {
        list.value = res.data.records
        page = res.data.current
        pageSize = res.data.size
        total = res.data.total
      })
      .finally(() => {
        loading.value = false
        finished.value = page * pageSize >= total
      })
}

const add = () => {
  router.push(`/patient/${props.patientId}/vision`)
}
const edit = (id) => {
  router.push(`/patient/${props.patientId}/vision/${id}`)
}
const actions = [
  {text: '编辑'},
  {text: '删除'},
];

const onSelect = (action, item) => {
  if (action.text === '编辑') {
    edit(item.id)
  } else {
    onRemove(item.id)
  }
}

const onRemove = (id) => {
  showConfirmDialog({
    message: '是否删除该视力信息？',
  })
      .then(() => {
        deleteVision(id)
            .then(res => {
              if (res.code === 0) {
                showNotify({type: 'success', message: '删除成功'});
                onLoad()
              }
            })
            .catch(err => {
              showNotify({type: 'danger', message: '删除失败'})
            })
      })
      .catch(() => {
      });
}

onMounted(() => {
  eventBus.on('nav-right-click', () => {
    router.push(`/patient/${props.patientId}/remind`)
  });
});

onUnmounted(() => {
  eventBus.off('nav-right-click')
})
</script>

<template>
  <div class="main-content">
    <van-tabs v-model:active="active" sticky offset-top="46px">
      <van-tab title="数据">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            @load="onLoad"
        >
          <van-cell-group inset v-for="(item, index) in list" :key="item">
            <van-swipe-cell>
              <div class="cell">
                <van-row>
                  <van-col span="2">
                    {{ index + 1 }}
                  </van-col>
                  <van-col span="20">
                    <div class="time">{{ item.healTime }}</div>
                  </van-col>
                  <van-col span="2">
                    <van-popover v-model:show="item.showPopover" :actions="actions"
                                 @select="(action) => onSelect(action, item)" theme="dark" placement="bottom-end">
                      <template #reference>
                        <van-icon name="arrow"/>
                      </template>
                    </van-popover>
                  </van-col>
                </van-row>

                <van-row class="content">
                  <van-col span="12">
                    <van-row class="title">
                      <van-col span="8" offset="8">右</van-col>
                      <van-col span="8">左</van-col>
                    </van-row>
                    <van-row>
                      <van-col class="left" span="8">{{ item.rightVision }}</van-col>
                      <van-col span="8">裸眼</van-col>
                      <van-col class="right" span="8">{{ item.leftVision }}</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="8" class="left">{{ item.rightSphericalMirror }}</van-col>
                      <van-col span="8">散瞳</van-col>
                      <van-col span="8" class="right">{{ item.leftSphericalMirror }}</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="8" class="left">{{ item.rightCylinderMirror }}</van-col>
                      <van-col span="8">散光</van-col>
                      <van-col span="8" class="right">{{ item.leftCylinderMirror }}</van-col>
                    </van-row>
                  </van-col>
                  <van-col span="12">
                    <van-row class="title">
                      <van-col span="8" offset="8">右</van-col>
                      <van-col span="8">左</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="8" class="left">{{ item.rightOcularAxis }}</van-col>
                      <van-col span="8">眼轴长</van-col>
                      <van-col span="8" class="right">{{ item.leftOcularAxis }}</van-col>
                    </van-row>
                    <van-row>
                      <van-col span="8" class="left">{{
                          ((item.rightHorizontalKeratometry + item.rightVerticalKeratometry) / 2 * item.rightOcularAxis / 337.5).toFixed(2)
                        }}
                      </van-col>
                      <van-col span="8">曲率比</van-col>
                      <van-col span="8" class="right">{{
                          ((item.leftHorizontalKeratometry + item.leftVerticalKeratometry) / 2 * item.leftOcularAxis / 337.5).toFixed(2)
                        }}
                      </van-col>
                    </van-row>
                    <van-row>
                      <van-col span="8" class="left">{{ item.rightAxisPosition }}</van-col>
                      <van-col span="8">轴位</van-col>
                      <van-col span="8" class="right">{{item.leftAxisPosition }}</van-col>
                    </van-row>
                  </van-col>
                </van-row>
              </div>
              <template #right>
                <van-button square type="primary" text="编辑" class="edit-button" @click="edit(item.id)"/>
                <van-button square type="danger" text="删除" class="delete-button" @click="onRemove(item.id)"/>
              </template>
            </van-swipe-cell>
          </van-cell-group>
        </van-list>
        <div class="add-btn">
          <van-button color="linear-gradient(to right, #6c43b2, #4895b2)" type="primary" @click="add" block round>
            新增视力信息
          </van-button>
        </div>
      </van-tab>
      <van-tab title="图表">
        <chart-group :patient-id="props.patientId"></chart-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
.main-content {
  padding-bottom: 50px;

  .delete-button, .edit-button {
    height: 100%;
  }

  .tabs-container {
    position: fixed;
    top: 46px;
    left: 0;
    width: 100%;
    background-color: #fff; /* 避免透明背景影响显示 */
    z-index: 999; /* 确保在其他内容之上 */
  }

  .add-btn {
    position: fixed;
    bottom: 6px;
    left: 0;
    padding: 0 16px;
    width: calc(100% - 32px);
  }

  .van-cell-group {
    margin-top: 16px;
    background: linear-gradient(to right, #6c43b2, #4895b2);
    color: white;
  }

  .cell {
    padding: 16px;

    .time {
      text-align: center;
      width: 100%;
      font-size: 20px;
    }

    .content {
      display: flex;
      text-align: center;
      margin-top: 8px;

      .van-row {
        border-bottom: #C8C8C8 1px solid;
        padding: 8px;
        line-height: 20px;
      }

      .van-row {
        .left, .right {
          font-weight: bold;
        }
      }

      .title {
        color: #C8C8C8;
      }
    }
  }
}
</style>